<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <!-- BootStrap不支持IE的兼容模式,下面代码为了代码在IE下运行最新的渲染模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。 -->
    <!-- 这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。 -->
    <!-- width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no -->
    <!-- 初始化移动设备的浏览 width=device-width 视口的宽度等于设备宽度，initial-scale=1 缩放比例为1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>羽Libra::404 没找到该页面</title>

    <!-- 加载Bootstrap css 样式 -->
    <link href="${ctx}/static/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
    
    <style type="text/css">
      
      /* Links */
      a,
      span, 
      a:focus,
      a:hover {
        color: #fff;
      }
      
      /* Custom default button */
      .btn-default,
      .btn-default:hover,
      .btn-default:focus {
        color: #333;
        text-shadow: none; /* Prevent inheritence from `body` */
        background-color: #fff;
        border: 1px solid #fff;
      }
      
      
      /*
       * Base structure
       */
      
      html,
      body {
        height: 100%;
        background-color: #333;
      }
      body {
        color: #fff;
        text-align: center;
        text-shadow: 0 1px 3px rgba(0,0,0,.5);
      }
      
      /* Extra markup and styles for table-esque vertical and horizontal centering */
      .site-wrapper {
        display: table;
        width: 100%;
        height: 100%; /* For at least Firefox */
        min-height: 100%;
        -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
                box-shadow: inset 0 0 100px rgba(0,0,0,.5);
      }
      .site-wrapper-inner {
        display: table-cell;
        vertical-align: top;
      }
      .cover-container {
        margin-right: auto;
        margin-left: auto;
      }
      
      /* Padding for spacing */
      .inner {
        padding: 30px;
      }
      
      
      /*
       * Header
       */
      .masthead-brand {
        margin-top: 10px;
        margin-bottom: 10px;
      }
      
      .masthead-nav > li {
        display: inline-block;
      }
      .masthead-nav > li + li {
        margin-left: 20px;
      }
      .masthead-nav > li > a {
        padding-right: 0;
        padding-left: 0;
        font-size: 16px;
        font-weight: bold;
        color: #fff; /* IE8 proofing */
        color: rgba(255,255,255,.75);
        border-bottom: 2px solid transparent;
      }
      .masthead-nav > li > span {
        padding-right: 0;
        padding-left: 0;
        font-size: 16px;
        font-weight: bold;
        color: #fff; /* IE8 proofing */
        color: rgba(255,255,255,.75);
        border-bottom: 2px solid transparent;
      }
      .masthead-nav > li > a:hover,
      .masthead-nav > li > a:focus {
        background-color: transparent;
        border-bottom-color: #a9a9a9;
        border-bottom-color: rgba(255,255,255,.25);
      }
      .masthead-nav > .active > a,
      .masthead-nav > .active > a:hover,
      .masthead-nav > .active > a:focus {
        color: #fff;
        border-bottom-color: #fff;
      }
      
      @media (min-width: 768px) {
        .masthead-brand {
          float: left;
        }
        .masthead-nav {
          float: right;
        }
      }
      
      
      /*
       * Cover
       */
      
      .cover {
        padding: 0 20px;
      }
      .cover .btn-lg {
        padding: 10px 20px;
        font-weight: bold;
      }
      
      
      /*
       * Footer
       */
      
      .mastfoot {
        color: #999; /* IE8 proofing */
        color: rgba(255,255,255,.5);
      }
      
      
      /*
       * Affix and center
       */
      
      @media (min-width: 768px) {
        /* Pull out the header and footer */
        .masthead {
          position: fixed;
          top: 0;
        }
        .mastfoot {
          position: fixed;
          bottom: 0;
        }
        /* Start the vertical centering */
        .site-wrapper-inner {
          vertical-align: middle;
        }
        /* Handle the widths */
        .masthead,
        .mastfoot,
        .cover-container {
          width: 100%; /* Must be percentage or pixels for horizontal alignment */
        }
      }
      
      @media (min-width: 992px) {
        .masthead,
        .mastfoot,
        .cover-container {
          width: 700px;
        }
      }
          
    </style>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- 使IE8支持HTML5标签 -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="${ctx}/static/support/html5shiv.min.js"></script>
      <script src="${ctx}/static/respond.min.js"></script>
    <![endif]-->
    
  </head>
  <body>
    <div class="site-wrapper">

      <div class="site-wrapper-inner">

        <div class="cover-container">

          <div class="masthead clearfix">
            <div class="inner">
              <h3 class="masthead-brand">羽Libra</h3>
              <nav>
                <ul class="nav masthead-nav">
                  <li class="active"><span>羽Libra</span></li>
                </ul>
              </nav>
            </div>
          </div>

          <div class="inner cover">
            <h1 class="cover-heading">404...页面被外星人带走了！</h1>
            <p class="lead">
              不用担心,我们的星际舰队已经出发,很快可以帮您找回！<br />您可以先回到主页继续操作，或者查阅其他资料.
            </p>
            <p class="lead">
              <a href="${ctx}/workbench" class="btn btn-lg btn-default">回到主页</a>
            </p>
          </div>

          <div class="mastfoot">
            <div class="inner">
              <p>CopyRight© 2006-2015 <a href="http://www.ggec.com.cn/">GuoGuang Electric Company Ltd..</a> All Rights Reserved.</p>
            </div>
          </div>

        </div>

      </div>

    </div>
    

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="${ctx}/static/jquery/jquery-1.11.3.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="${ctx}/static/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
  </body>
</html>